<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`联盟编号`">
					<el-input
						v-model.trim="queryData.leaguesCode"
						v-input="{ name: 'noEmpty' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
						style="width: 220px"
					></el-input>
				</el-form-item>
				<el-form-item :label="`联盟名称`">
					<el-input
						v-model.trim="queryData.leaguesName"
						v-input="{ name: 'noEmpty' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
						style="width: 220px"
					></el-input>
				</el-form-item>
				<el-form-item label="俱乐部ID">
					<el-input
						v-input="{ name: 'num' }"
						clearable
						v-model="queryData.clubId"
						:placeholder="$t('common.please_enter')"
						style="width: 180px"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90900055')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<div style="margin-bottom: 10px;">
				<el-button
					v-if="hasPermission('90900056')"
					type="primary"
					size="mini"
					@click="handleAdd"
				>
					新增俱乐部联盟
				</el-button>
			</div>
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					type="index"
					label="序号"
					width="80"
					align="center"
				/>
				<el-table-column
					:label="`联盟编号`"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.leaguesCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="联盟名称"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.leaguesName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`俱乐部数量`"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.clubCount }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`俱乐部清单`"
					min-width="260"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div
							v-for="(item, index) in scope.row.clubList"
							:key="index + Math.random()"
						>
							{{ `${item.clubId}: ${item.clubName};` }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					:label="`备注`"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`创建人`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="最后操作时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`最后操作人`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.card_ables_list.operate')}`"
					min-width="100"
					align="center"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('90900057')"
							type="text"
							@click="handleEdit(scope)"
						>
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<Edit
			v-if="editDialog.visible"
			:visible.sync="editDialog.visible"
			:detailData="editDialog.detailData"
			@loadData="loadData"
		></Edit>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
import Edit from './components/edit.vue'

export default {
	name: routerNames.clubAllianceList,
	components: {
		MainContent,
		Edit
	},
	mixins: [list],
	data() {
		return {
			loading: false,
			list: [],
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: ['spetify'],
			queryData: {
				leaguesCode: undefined,
				leaguesName: undefined,
				clubId: undefined
			},
			editDialog: {
				visible: false,
				detailData: {}
			}
		}
	},
	watch: {
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.clubAllianceList) > -1) {
				this.getRouteQuery(true)
			}
		}
	},
	created() {
		this.getRouteQuery()
	},
	methods: {
		// 请求
		getRouteQuery(isLoadData = false) {
			if (this.$route.query.clubId) {
				this.queryData.leaguesCode = undefined
				this.queryData.leaguesName = undefined
				this.queryData.clubId = this.$route.query.clubId
				this.$router.replace({ query: {} })
				if (isLoadData) {
					this.loadData()
				}
			}
		},
		handleAdd() {
			this.editDialog = {
				visible: true,
				detailData: {}
			}
		},
		handleEdit(scope) {
			this.editDialog = {
				visible: true,
				detailData: scope.row
			}
		},
		getCurrentParams() {
			const params = {
				...this.queryData
			}
			return params
		},
		loadData() {
			const params = this.getParams(this.getCurrentParams())
			this.loading = true
			this.list = []
			this.$api
				.getClubLeaguesList(params)
				.then((res) => {
					this.loading = false
					const { record = [], totalRecord } = res.data || {}
					this.list = record
					this.total = totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSearch() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			Object.keys(this.queryData).forEach((key) => {
				this.queryData[key] = undefined
			})
			this.pageNum = 1
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getCurrentParams())
			params.pageSize = undefined
			params.pageNum = undefined
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportClubLeaguesList',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.text-click {
	color: #409eff;
	cursor: pointer;
}
.action-button {
	min-width: 30px !important;
}
</style>
